<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>悦动科技表单验证</title>
    <script src="./js/yaoyao001.js"></script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        .mainBg {
            width: 400px;
        }
        div{
            border: 1px solid #999;
            margin: auto;
            top: 100px;
            position: relative;
        }
        form{
            margin: 0px;
            padding: 0px;
            text-align: center;
        }
        .tips{
            font-size: 14px;
            margin: 0 auto;
            width: 200px;
            margin-top: 5px;
        }
        input[name]{
            width: 200px;
            height: 30px;
            border: 1px solid gray;
            border-radius: 5px;
        } 
        form label{
            position: relative;
            right: 20px;
            font-weight:bold;
        }
        input[value]{
            position: relative;
            left: 10px;
            height: 30px;
            border-radius: 5px;
            background-color:steelblue;
            color: white;
        }
                
    </style>
</head>

<body>
    <div class="mainBg">
        <form action="#" method="get" onsubmit="return testPromise2()">
            <label>名称: </label>
            <input type="text" name="fname" id="nameTf"/>
            <input type="submit" value="验证" />
        </form>
        <p id="inputTip" class="tips">必填, 长度为4~16个字符</p>
    </div>

    <div style="position:absolute;left:100px;top:100px;background:black;color:white;font-size:24px;">
        <span style="background:red;margin:0;">
            <span>sss</span>
            <span style="overflow:hidden;display:inline-block;background:blue;">ssfdfdfdfdfdfdfdfdfds</span>sss
        </span>
    </div>
</body>
</html>
<!-- 
    1. margin 0 auto 的居中效果怎么来的;
    2. text-align 的作用是?
    3. form是块元素 还是 行内元素?

-->